<template>
  <div class="main_container">
    <company-title>智能推荐</company-title>
    <menu-nav v-if="published_joblist.length>0" :list="published_joblist" :active-tab="params.id"></menu-nav>
    <div class="my_table bg_th">
      <el-table :data="dataset" style="width: 100%" v-loading="listLoading">
        <el-table-column width="380" prop="information" label="基本信息">
          <template slot-scope="scope">
            <div class="tab_information">
              <div class="information_img">
                <img :src="scope.row.photo_img_src"/>
              </div>
              <div class="information_text">
                <p><a target="_blank" :href="scope.row.resume_link_url_web">{{ scope.row.fullname }}</a></p>
                <span>{{ scope.row.age_text }}岁 · {{ scope.row.sex_text }} · {{ scope.row.education_text }} · {{ scope.row.experience_text }}经验</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="intention_wage" label="期望薪资">
          <template slot-scope="scope">
            <span class="salary_text">{{ scope.row.intention_wage }}/月</span>
          </template>
        </el-table-column>
        <el-table-column prop="current_text" label="求职状态">
          <template slot-scope="scope">
            <span class="current_text">{{ scope.row.current_text }}</span>
          </template>
        </el-table-column>
        <el-table-column label="求职意向">
          <template slot-scope="scope">
            <p class="intention_type"><span>想找</span> {{ scope.row.intention_jobs }} <span>工作</span></p>
            <p class="intention_region"><span>想在</span> {{ scope.row.intention_district }} <span>工作</span></p>
          </template>
        </el-table-column>
        <el-table-column width="190" align='center' prop="refreshtime" label="刷新时间">
          <template slot-scope="scope">
            <p class="date_text">{{ scope.row.refreshtime }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      :total="total"
      :current-page="params.page"
      :page-size="params.pagesize"
      @handleCurrentChange="doSearch"
    ></pagination>
  </div>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'

export default {
  data() {
    return {
      published_joblist: [],
      listLoading: false,
      dataset: [],
      total: 0,
      params: {
        id: 0,
        page: 1,
        pagesize: 10,
      },
    }
  },
  watch: {
    '$route': function (newVal) {
      if (newVal.query.id !== undefined) {
        this.params.id = newVal.query.id
        this.dataset = []
        this.fetchData(true)
      }
    }
  },
  created() {
    if (this.$route.query.id !== undefined) {
      this.params.id = this.$route.query.id
    }
    this.fetchDataPublishedJoblist()
  },
  methods: {
    fetchDataPublishedJoblist() {
      http
        .get(api.get_publish_jobs, {})
        .then(res => {
          let counter = 0;
          res.data.items.forEach(ele => {
            let tmp = {
              label: ele.jobname,
              href: '/company/recommend?id=' + ele.id,
              name: ele.id + '',
              active: counter == 0 ? true : false
            }
            this.published_joblist.push(tmp)
            if (counter == 0 && !this.params.id) {
              this.params.id = ele.id
            }
            counter++
          });
          if (this.published_joblist.length > 0) {
            this.fetchData(true)
          }
        })
        .catch(() => {
        })
    },
    fetchData(init) {
      this.listLoading = true
      if (init === true) {
        this.fetchDataTotal()
      }
      http
        .get(api.recommend_resumelist, this.params)
        .then(res => {
          this.dataset = [...res.data.items]
          this.listLoading = false
        })
        .catch(() => {
        })
    },
    fetchDataTotal() {
      this.params.page = 1
      http
        .get(api.recommend_resumelist_total, this.params)
        .then(res => {
          this.total = res.data
        })
        .catch(() => {
        })
    },
    doSearch(page) {
      this.params.page = page
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab_information {
  display: flex;
}

.information_img {
  margin-right: 10px;
  border-radius: 50%;
}

.information_img img {
  border-radius: 50%;
  width: 52px;
  height: 52px;
}

.information_text p {
  font-size: 16px;
  color: #333333;
}

.information_text p a {
  font-size: 16px;
  color: #333333;
}

.information_text span {
  display: inline-block;
  font-size: 14px;
  color: #999999;
  margin-top: 10px;
}

.label_text {
  background: #fdf6ec;
  font-size: 12px;
  color: #e6a552;
  border: 1px solid #faecd8;
  padding: 6px 11px;
  border-radius: 5px;
}

.salary_text {
  font-size: 14px;
  color: #ff704f;
}

.current_text {
  font-size: 14px;
  color: #999;
}

.intention_type span, .intention_region span {
  font-size: 14px;
  color: #999;
}

.intention_type, .intention_region {
  font-size: 14px;
  color: #666666;
}

.date_text {
  font-size: 14px;
  color: #666;
}
</style>
